<template>
	<view class="container">
		<!-- 头部标题 -->
		<view class="header">
			<text class="title">选择时段</text>
		</view>

		<!-- 时间段与价格输入框 -->
		<view class="time-slots">
			<view v-for="(slot, index) in timeSlots" :key="index" class="time-slot">
				<!-- 显示时间段 -->
				<text class="time">{{ slot.start }} - {{ slot.end }}</text>
				<!-- 输入框，使用 v-model 双向绑定，并在输入时通过 $emit 将价格传递给父组件 -->
				<input class="price-input" placeholder="输入价格" type="number" v-model="priceList[index].price"
					@input="updatePrice(index, priceList[index].price)" />
			</view>
		</view>

		<!-- 批量设置价格按钮 -->
		<view class="batch-action">
			<input class="batch-price-input" placeholder="输入统一价格" type="number" v-model="batchPrice"
				@input="onBatchPriceChange" />
			<button class="batch-btn" @click="setBatchPrice">批量设置价格</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			duration: {
				type: Number,
				default: 90, // 默认时长为 90 分钟
			},
			initialPrices: {
				type: Array,
				default: () => [],
			},
		},
		data() {
			return {
				openingTime: "08:30", // 营业开始时间
				closingTime: "23:30", // 营业结束时间
				timeSlots: [], // 存储时间段
				priceList: [], // 存储时间和价格信息（从父组件传入）
				batchPrice: "", // 批量设置的统一价格
			};
		},
		created() {
			this.initializeTimeSlots(); // 初始化时间段
		},
		watch: {
			// 当 duration 变化时重新初始化时间段
			duration(newValue, oldValue) {
				this.initializeTimeSlots();
			},
		},
		methods: {
			// 将时间字符串转换为分钟数
			timeToMinutes(time) {
				const [hours, minutes] = time.split(":").map(Number);
				return hours * 60 + minutes;
			},
			// 将分钟数转换为时间字符串
			minutesToTime(minutes) {
				const hours = Math.floor(minutes / 60);
				const mins = minutes % 60;
				return `${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}`;
			},
			// 初始化时间段列表
			initializeTimeSlots() {
				const startMinutes = this.timeToMinutes(this.openingTime);
				const endMinutes = this.timeToMinutes(this.closingTime);

				this.timeSlots = []; // 清空原有时间段
				this.priceList = []; // 确保清空原有价格列表

				let currentMinutes = startMinutes;

				// 按照当前的 duration 重新计算时间段
				while (currentMinutes + this.duration <= endMinutes) {
					const startTime = this.minutesToTime(currentMinutes);
					const endTime = this.minutesToTime(currentMinutes + this.duration);
					this.timeSlots.push({
						start: startTime,
						end: endTime,
					});

					// 确保 priceList 长度和 timeSlots 一致
					this.priceList.push({
						time: startTime,
						price: "", // 初始化价格为空
					});

					currentMinutes += this.duration;
				}

				// 如果传入了 initialPrices，并且长度和 timeSlots 相同，则填充价格
				if (this.initialPrices.length && this.initialPrices.length === this.timeSlots.length) {
					this.initialPrices.forEach((price, index) => {
						this.priceList[index].price = price.price || ""; // 假设 price 是一个包含 price 属性的对象
					});
				}
			},
			// 每次输入价格时，通知父组件更新价格
			updatePrice(index, price) {
				if (index >= this.priceList.length || index < 0) {
					console.error("Invalid index:", index);
					return;
				}

				const validPrice = parseFloat(price);
				if (isNaN(validPrice) || validPrice <= 0) {
					this.priceList[index].price = '';
					this.$emit("update-price", {
						index,
						price: ''
					});
					return;
				}

				this.$emit("update-price", {
					index,
					price: validPrice
				});
			},
			// 批量设置价格
			setBatchPrice() {
				const validPrice = parseFloat(this.batchPrice);
				if (isNaN(validPrice) || validPrice <= 0) {
					return; // 如果输入无效价格，直接返回
				}

				// 批量更新价格
				this.priceList.forEach((item, index) => {
					if (item) { // 确保 item 存在
						item.price = validPrice;
						this.updatePrice(index, validPrice); // 触发更新价格事件
					}
				});
			},
			// 批量价格输入变化时，更新 batchPrice
			onBatchPriceChange() {
				const validPrice = parseFloat(this.batchPrice);
				if (isNaN(validPrice) || validPrice <= 0) {
					this.batchPrice = ''; // 如果输入无效，清空批量价格框
				}
			},
		},
	};
</script>

<style scoped>
	/* 样式保持不变 */
	.container {
		/* padding: 20rpx; */
		/* background-color: #f5f5f5; */
		/* min-height: 100vh; */
	}

	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
		background-color: #fff;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.time-slots {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.time-slot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 20rpx;
		margin-bottom: 10rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}

	.time {
		font-size: 28rpx;
		color: #333;
	}

	.price-input {
		width: 180rpx;
		height: 50rpx;
		border: 1px solid #ccc;
		border-radius: 8rpx;
		padding: 0 10rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.batch-action {
		display: flex;
		flex-direction: row;
		align-items: center;
		/* 垂直居中 */
		justify-content: space-between;
		/* 两边均匀留白 */
		margin: 0 20rpx;
		/* 设置整体左右边距，调整整体布局 */
	}

	.batch-price-input {
		flex: 1;
		/* 输入框占据剩余空间 */
		height: 50rpx;
		line-height: 50rpx;
		/* 文字垂直居中 */
		border: 1px solid #ccc;
		border-radius: 8rpx;
		padding: 0 10rpx;
		/* 输入框内部左右留白 */
		font-size: 28rpx;
		text-align: center;
		margin-right: 10rpx;
		/* 调整间距 */
	}

	.batch-btn {
		height: 50rpx;
		/* 与输入框保持一致 */
		line-height: 50rpx;
		/* 文字垂直居中 */
		padding: 0 24rpx;
		/* 内边距适中 */
		background-color: #65C61D;
		color: #fff;
		font-size: 28rpx;
		border-radius: 8rpx;
		border: none;
		cursor: pointer;
		text-align: center;
	}
</style>